<template>
    <div class="tenantManagement-container">

        <el-collapse-transition>
            <div class="more-query" v-show="this.moreQueryFlag">
                <!-- 更多查找 -->
                <vab-query-form>
                    <vab-query-form-left-panel :span="24">
                        <el-form :inline="true" :model="queryForm" @submit.native.prevent>
                            #for(column : data.model.moreQueryList)

                            ### 字典
                            #if(column.showType == "2")
                            <el-form-item>
                                <el-select v-model="queryForm.#(column.fieldHumpName+'_'+column.queryType)"
                                    placeholder="请选择#(column.fieldComments)" clearable style="width: 100%">
                                    <el-option v-for="item in dict.#(column.dictTypeCode)" :key="item.dictValue"
                                        :label="item.dictName" :value="item.dictValue"></el-option>
                                </el-select>
                            </el-form-item>
                            #else if(column.showType == "3")
                            ### 时间
                            <el-form-item>
                                <el-date-picker v-model="#(column.fieldHumpName)DatePicker" type="datetimerange"
                                    :picker-options="pickerOptions" range-separator="至"
                                    start-placeholder="开始#(column.fieldComments)"
                                    end-placeholder="结束#(column.fieldComments)" align="right">
                                </el-date-picker>
                            </el-form-item>
                            #else if(column.showType == "4")
                            ### 日期
                            <el-form-item>
                                <el-date-picker v-model="#(column.fieldHumpName)DatePicker" type="daterange"
                                    align="right" range-separator="至" start-placeholder="开始#(column.fieldComments)"
                                    end-placeholder="结束#(column.fieldComments)"></el-date-picker>
                            </el-form-item>
                            #else
                            #if(column.queryType == "EQ" || column.queryType == "LIKE")
                            <el-form-item>
                                <el-input v-model.trim="queryForm.#(column.fieldHumpName)_#(column.queryType)"
                                    placeholder="请输入#(column.fieldComments)" clearable />
                            </el-form-item>
                            #else if(column.queryType == "RANGE")
                            <el-col :span="12">
                                <el-form-item style="text-align: center">
                                    <el-input v-model.trim="queryForm.#(column.fieldHumpName)_BEGIN"
                                        placeholder="#(column.fieldComments)开始" clearable
                                        style="float: left;width: calc(50% - 6px)" />
                                    <div style="float:left;width: 12px">-</div>
                                    <el-input v-model.trim="queryForm.#(column.fieldHumpName)_END"
                                        placeholder="#(column.fieldComments)结束" clearable
                                        style="float: right;width: calc(50% - 6px)" />
                                </el-form-item>
                            </el-col>
                            #end
                            #end
                            #end


                        </el-form>
                    </vab-query-form-left-panel>

                </vab-query-form>
                <el-divider></el-divider>
            </div>
        </el-collapse-transition>

        <!-- 主要操作  -->
        <vab-query-form>
            <vab-query-form-left-panel :span="10">
                <el-button #if(data.subModuleName !=null && data.subModuleName !="" )
                    v-if="$perms('#(data.moduleName.toLowerCase())_#(data.subModuleName.toLowerCase())_insert')" #else
                    v-if="$perms('#(data.moduleName.toLowerCase())_insert')" #end icon="el-icon-plus" type="primary"
                    @click="handleInsert"> 添加 </el-button>

                <el-button #if(data.subModuleName !=null && data.subModuleName !="" )
                    v-if="$perms('#(data.moduleName.toLowerCase())_#(data.subModuleName.toLowerCase())_import')" #else
                    v-if="$perms('#(data.moduleName.toLowerCase())_import')" #end icon="el-icon-upload2" type="warning"
                    @click="handleImportExcel"> 导入 </el-button>

                <el-button #if(data.subModuleName !=null && data.subModuleName !="" )
                    v-if="$perms('#(data.moduleName.toLowerCase())_#(data.subModuleName.toLowerCase())_export')" #else
                    v-if="$perms('#(data.moduleName.toLowerCase())_export')" #end icon="el-icon-download" type="warning"
                    @click="handleExportExcel"> 导出 </el-button>

                <el-button #if(data.subModuleName !=null && data.subModuleName !="" )
                    v-if="$perms('#(data.moduleName.toLowerCase())_#(data.subModuleName.toLowerCase())_delete')" #else
                    v-if="$perms('#(data.moduleName.toLowerCase())_delete')" #end :disabled="!selectRows.length > 0"
                    icon="el-icon-delete" type="danger" @click="handleDelete"> 批量删除 </el-button>

            </vab-query-form-left-panel>
            <vab-query-form-right-panel :span="14">
                <el-form :inline="true" :model="queryForm" @submit.native.prevent>
                    ### 代码生成器 简要只展示2个
                    #for(column : data.model.briefQueryList)

                    ### 字典
                    #if(column.showType == "2")
                    <el-form-item>
                        <el-select v-model="queryForm.#(column.fieldHumpName+'_'+column.queryType)"
                            placeholder="请选择#(column.fieldComments)" clearable style="width: 100%">
                            <el-option v-for="item in dict.#(column.dictTypeCode)" :key="item.dictValue"
                                :label="item.dictName" :value="item.dictValue"></el-option>
                        </el-select>
                    </el-form-item>
                    #else if(column.showType == "3")
                    ### 时间
                    <el-form-item>
                        <el-date-picker v-model="#(column.fieldHumpName)DatePicker" type="datetimerange"
                            :picker-options="pickerOptions" range-separator="至"
                            start-placeholder="开始#(column.fieldComments)" end-placeholder="结束#(column.fieldComments)"
                            align="right">
                        </el-date-picker>
                    </el-form-item>
                    #else if(column.showType == "4")
                    ### 日期
                    <el-form-item>
                        <el-date-picker v-model="#(column.fieldHumpName)DatePicker" type="daterange" align="right"
                            range-separator="至" start-placeholder="开始#(column.fieldComments)"
                            end-placeholder="结束#(column.fieldComments)"></el-date-picker>
                    </el-form-item>
                    #else
                    #if(column.queryType == "EQ" || column.queryType == "LIKE")
                    <el-form-item>
                        <el-input v-model.trim="queryForm.#(column.fieldHumpName)_#(column.queryType)"
                            placeholder="请输入#(column.fieldComments)" clearable />
                    </el-form-item>
                    #else if(column.queryType == "RANGE")
                    <el-col :span="12">
                        <el-form-item style="text-align: center">
                            <el-input v-model.trim="queryForm.#(column.fieldHumpName)_BEGIN"
                                placeholder="#(column.fieldComments)开始" clearable
                                style="float: left;width: calc(50% - 6px)" />
                            <div style="float:left;width: 12px">-</div>
                            <el-input v-model.trim="queryForm.#(column.fieldHumpName)_END"
                                placeholder="#(column.fieldComments)结束" clearable
                                style="float: right;width: calc(50% - 6px)" />
                        </el-form-item>
                    </el-col>
                    #end
                    #end
                    #end

                    <el-form-item>
                        <el-button icon="el-icon-search" type="primary" @click="queryData">
                            查询
                        </el-button>

                        #if(data.model.moreQueryList != null && data.model.moreQueryList.size() > 0)
                        <el-button icon="el-icon-search" @click="moreQuery">
                            更多
                        </el-button>
                        #end

                    </el-form-item>
                </el-form>
            </vab-query-form-right-panel>
        </vab-query-form>

        <el-table v-loading="listLoading" :data="list" :element-loading-text="elementLoadingText"
            @selection-change="setSelectRows">
            <el-table-column show-overflow-tooltip type="selection"></el-table-column>

            <el-table-column show-overflow-tooltip label="序号" width="95">
                <template slot-scope="scope">
                    {{(queryForm.pageNo - 1) * queryForm.pageSize + scope.$index + 1}}
                </template>
            </el-table-column>

            #for(column : data.model.columnList)
            ### 字典
            #if(column.showType == "2" && column.izShowList == "1")
            <el-table-column show-overflow-tooltip prop="#(column.fieldHumpName)" label="#(column.fieldComments)">

                <template slot-scope="scope">
                    <span>
                        {{ $getDictNameByValue('#(column.dictTypeCode)', scope.row.#(column.fieldHumpName)) }}
                    </span>
                </template>

            </el-table-column>

            #else
            #if(column.izShowList == "1")
            <el-table-column show-overflow-tooltip prop="#(column.fieldHumpName)"
                label="#(column.fieldComments)"></el-table-column>

            #end
            #end
            #end

            <el-table-column show-overflow-tooltip label="操作" width="200" #if(data.subModuleName !=null &&
                data.subModuleName !="" )
                v-if="$perms('#(data.moduleName.toLowerCase())_#(data.subModuleName.toLowerCase())_update') || $perms('#(data.moduleName.toLowerCase())_#(data.subModuleName.toLowerCase())_delete')"
                #else
                v-if="$perms('#(data.moduleName.toLowerCase())_update') || $perms('#(data.moduleName.toLowerCase())_delete')"
                #end>
                <template v-slot="scope">
                    <el-button #if(data.subModuleName !=null && data.subModuleName !="" )
                        v-if="$perms('#(data.moduleName.toLowerCase())_#(data.subModuleName.toLowerCase())_update')"
                        #else v-if="$perms('#(data.moduleName.toLowerCase())_update')" #end type="text"
                        @click="handleUpdate(scope.row)"> 编辑 </el-button>

                    <el-divider direction="vertical"></el-divider>

                    <el-button #if(data.subModuleName !=null && data.subModuleName !="" )
                        v-if="$perms('#(data.moduleName.toLowerCase())_#(data.subModuleName.toLowerCase())_delete')"
                        #else v-if="$perms('#(data.moduleName.toLowerCase())_delete')" #end type="text"
                        @click="handleDelete(scope.row)"> 删除 </el-button>
                </template>

            </el-table-column>
        </el-table>
        <el-pagination background :current-page="queryForm.pageNo" :page-size="queryForm.pageSize" :layout="layout"
            :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>

        <edit ref="edit" @fetchData="fetchData"></edit>
        <import ref="import" @fetchData="fetchData"></import>

    </div>
</template>

<script>
#if(data.subModuleName != null && data.subModuleName != "")
import { getList, doDelete, doDeleteAll, doExportExcel } from "@/api/#(data.moduleName)/#(data.subModuleName)/#(data.model.tableHumpName)ManagementApi";
#else
import { getList, doDelete, doDeleteAll, doExportExcel } from "@/api/#(data.moduleName)/#(data.model.tableHumpName)ManagementApi";
#end
import Edit from "./components/#(data.model.tableHumpName)ManagementEdit";
import Import from "./components/#(data.model.tableHumpName)ManagementImport";

import { vueButtonClickBan } from "@/utils";
import { isNotNull } from "@/utils/valiargs";
import { formateDate } from "@/utils/format";

export default {
    name: "#(data.model.tableHumpName)Management",
    components: { Edit, Import },
    data() {
        return {
            list: null,
            listLoading: true,
            layout: "total, prev, pager, next, sizes, jumper",
            total: 0,
            selectRows: "",
            elementLoadingText: "正在加载...",
            moreQueryFlag: false,
            queryForm: {
                pageNo: 1,
                pageSize: 10,
            ### 代码生成器 简要2个
            #for(column: data.model.briefQueryList)
            ### 字典
            #if(column.showType == "2")
            #(column.fieldHumpName) _EQ: "",
                #else if(column.showType == "3" || column.showType == "4")
            ### 日期
            #(column.fieldHumpName) _BEGIN: "",
            #(column.fieldHumpName) _END: "",
                #else
            #if(column.queryType == "EQ" || column.queryType == "LIKE")
            #(column.fieldHumpName) _#(column.queryType): "",
                #else if(column.queryType == "RANGE")
            #(column.fieldHumpName) _BEGIN: "",
            #(column.fieldHumpName) _END: "",
                #end
            #end
            #end
            ### 代码生成器 更多
            #for(column: data.model.moreQueryList)
            ### 字典
            #if(column.showType == "2")
            #(column.fieldHumpName) _EQ: "",
                #else if(column.showType == "3" || column.showType == "4")
            ### 日期
            #(column.fieldHumpName) _BEGIN: "",
            #(column.fieldHumpName) _END: "",
                #else
            #if(column.queryType == "EQ" || column.queryType == "LIKE")
            #(column.fieldHumpName) _#(column.queryType): "",
                #else if(column.queryType == "RANGE")
            #(column.fieldHumpName) _BEGIN: "",
            #(column.fieldHumpName) _END: "",
                #end
            #end
            #end
          },
          ### 代码生成器 简要2个
          #for(column: data.model.briefQueryList)
          ### 日期
          #if(column.showType == "3" || column.showType == "4")
          #(column.fieldHumpName) DatePicker: [],
            #end
          #end
          ### 代码生成器 更多
          #for(column: data.model.moreQueryList)
          ### 日期
          #if(column.showType == "3" || column.showType == "4")
          #(column.fieldHumpName) DatePicker: [],
            #end
          #end
          dict: {},
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
        };
    },
    created() {
        this.fetchData();
    },
    mounted() {
        #for(column : data.model.columnList)
        #if(column.dictTypeCode != null && column.dictTypeCode != "")
        this.dict.#(column.dictTypeCode) = this.$getDictList("#(column.dictTypeCode)");
        #end
        #end
    },
    methods: {
        setSelectRows(val) {
            this.selectRows = val;
        },
        handleInsert(row) {
            this.$refs["edit"].showEdit();
        },
        handleUpdate(row) {
            if (row.id) {
                this.$refs["edit"].showEdit(row);
            }
        },
        handleDelete(row) {
            if (row.id) {
                this.$baseConfirm("你确定要删除当前项吗", null, async () => {
                    const { msg } = await doDelete({ id: row.id });
                    this.$baseMessage(msg, "success");
                    await this.fetchData();
                });
            } else {
                if (this.selectRows.length > 0) {
                    const ids = this.selectRows.map((item) => item.id).join();
                    this.$baseConfirm("你确定要删除选中项吗", null, async () => {
                        const { msg } = await doDeleteAll({ ids });
                        this.$baseMessage(msg, "success");
                        await this.fetchData();
                    });
                } else {
                    this.$baseMessage("未选中任何行", "error");
                    return false;
                }
            }
        },
        // 导出excel
        handleExportExcel(el) {
            // 导出按钮防抖处理 默认限制为10秒
            vueButtonClickBan(el, 10);

            // 执行导出
            doExportExcel(this.queryForm);
        },
        // 导入excel
        handleImportExcel() {
            this.$refs["import"].show();
        },


        handleSizeChange(val) {
            this.queryForm.pageSize = val;
            this.fetchData();
        },
        handleCurrentChange(val) {
            this.queryForm.pageNo = val;
            this.fetchData();
        },
        moreQuery() {
            this.moreQueryFlag = !this.moreQueryFlag;
        },
        queryData() {
          ### 代码生成器 简要2个
            #for(column : data.model.briefQueryList)
          ### 日期
            #if(column.showType == "3" || column.showType == "4")
            if (isNotNull(this.#(column.fieldHumpName)DatePicker) && this.#(column.fieldHumpName)DatePicker.length === 2) {
                this.queryForm.#(column.fieldHumpName)_BEGIN =
                    this.#(column.fieldHumpName)DatePicker.length === 0 ? "" : formateDate(this.#(column.fieldHumpName)DatePicker[0], 'yyyy-MM-dd hh:mm:ss');
                this.queryForm.#(column.fieldHumpName)_END =
                    this.#(column.fieldHumpName)DatePicker.length === 0 ? "" : formateDate(this.#(column.fieldHumpName)DatePicker[1], 'yyyy-MM-dd hh:mm:ss');
            }else{
                this.queryForm.#(column.fieldHumpName)_BEGIN = "";
                this.queryForm.#(column.fieldHumpName)_END = "";
            }        #end
          #end
          ### 代码生成器 更多
          #for(column: data.model.moreQueryList)
          ### 日期
          #if(column.showType == "3" || column.showType == "4")
        if(isNotNull(this.#(column.fieldHumpName)DatePicker) && this.#(column.fieldHumpName)DatePicker.length === 2){
    this.queryForm.#(column.fieldHumpName)_BEGIN =
        this.#(column.fieldHumpName)DatePicker.length === 0 ? "" : formateDate(this.#(column.fieldHumpName)DatePicker[0], 'yyyy-MM-dd hh:mm:ss');
    this.queryForm.#(column.fieldHumpName)_END =
        this.#(column.fieldHumpName)DatePicker.length === 0 ? "" : formateDate(this.#(column.fieldHumpName)DatePicker[1], 'yyyy-MM-dd hh:mm:ss');
}else {
    this.queryForm.#(column.fieldHumpName)_BEGIN = "";
    this.queryForm.#(column.fieldHumpName)_END = "";
}
#end
#end

this.queryForm.pageNo = 1;
this.fetchData();
        },
        async fetchData() {
    this.listLoading = true;
    const { data } = await getList(this.queryForm);
    if (isNotNull(data)) {
        this.list = data.rows;
        this.total = data.total;
    }
    setTimeout(() => {
        this.listLoading = false;
    }, 300);
},
      },
    };
</script>